<template>
  <div class="role">
    <PageSearch
      :pageSearchConfig="pageSearchConfig"
      @reset="handleReset"
      @search="handleSearch"
    ></PageSearch>
    <PageContent
      class="pageContent"
      :pageContentConfig="refPageContentConfig"
      ref="pageContentRef"
      @createData="handleNewData"
      @edit="handleEdit"
      @changePropListShow="changePropListShow"
    ></PageContent>
    <PageModal
      ref="pageModalRef"
      :pageModalConfig="pageModalConfig"
      :defaultInfo="defaultInfo"
      :otherInfo="otherInfo"
    >
      <template #roleTree>
        <el-tree
          ref="elTreeRef"
          :data="allMenusData"
          show-checkbox
          node-key="id"
          :props="{
            label: 'name',
            children: 'children'
          }"
          @check="getNodes"
        />
      </template>
    </PageModal>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { storeToRefs } from 'pinia'
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'
import useMainStore from '@/stores/main/main'
import { usePageSearch } from '@/hooks/usePageSearch'
import { usePageModal } from '@/hooks/usePageModal'

import { mapMenusToId } from '@/utils/map-menu'
import { pageSearchConfig } from './config/search'
import { pageContentConfig } from './config/content'
import { pageModalConfig } from './config/modal'
import { usePageContent } from '@/hooks/usePageContent'

//为什么放在这里来呢因为是搜索部分调用了content部分的方法
const [pageContentRef, handleReset, handleSearch] = usePageSearch()

// 响应式数据,方便子组件根据这个值的改变响应
const [refPageContentConfig, changePropListShow] =
  usePageContent(pageContentConfig)

const defaultCheckedKeys = ref<any>([])
const elTreeRef = ref()
const editCb = (obj: any) => {
  defaultCheckedKeys.value = mapMenusToId(obj.menuList)
  nextTick(() => {
    elTreeRef.value.setCheckedKeys(defaultCheckedKeys.value)
  })
}
// 新增数据的弹窗的显示,编辑数据的弹窗显示
const [pageModalRef, defaultInfo, handleNewData, handleEdit] = usePageModal(
  undefined,
  editCb
)

const { allMenusData } = storeToRefs(useMainStore())

//选中的数据
const otherInfo = ref({})
const getNodes = (_: any, data2: any) => {
  let menuList = [...data2.checkedKeys, ...data2.halfCheckedKeys]
  otherInfo.value = { menuList } //对象增强写法
}
</script>

<style lang="less" scoped>
.role {
  .table {
    margin-top: 20px;
  }
  .pageContent {
    margin-top: 50px;
  }
}
</style>
